<template>
  <div class="about-page">
    <Header />
    
    <!-- Hero Section -->
    <section class="hero">
      <div class="container">
        <div class="hero-content">
          <h1 class="hero-title">关于我们</h1>
          <p class="hero-subtitle">
            了解 Wu-Lazy-Cloud-Network 项目的背景、团队和愿景
          </p>
        </div>
      </div>
    </section>

    <!-- Project Introduction -->
    <section class="project-intro">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">项目介绍</h2>
          <p class="section-subtitle">基于现代化技术栈的高性能网络穿透和代理工具</p>
        </div>
        
        <div class="intro-content">
          <div class="intro-text">
            <h3>项目背景</h3>
            <p>
              Wu-Lazy-Cloud-Network 是一个基于 Spring Boot 3.5.0 和 JDK 24 开发的高性能网络穿透和代理工具。
              项目起源于对现有网络穿透工具的不足之处的思考，旨在提供一个更加稳定、高效、易用的解决方案。
            </p>
            
            <h3>核心价值</h3>
            <ul>
              <li><strong>高性能</strong>: 基于 Netty 异步网络框架，支持高并发连接处理</li>
              <li><strong>易用性</strong>: 提供 Web 管理界面，支持一键部署和配置</li>
              <li><strong>稳定性</strong>: 采用心跳机制和连接池管理，确保服务稳定运行</li>
              <li><strong>扩展性</strong>: 模块化设计，支持自定义协议和过滤器</li>
              <li><strong>安全性</strong>: 支持多种认证机制和加密传输</li>
            </ul>
            
            <h3>技术特色</h3>
            <ul>
              <li>基于最新的 JDK 24 和 Spring Boot 3.5.0</li>
              <li>采用 Netty 高性能网络框架</li>
              <li>支持多种协议：TCP、HTTP、SOCKS</li>
              <li>提供完整的流量监控和统计功能</li>
              <li>支持集群部署和负载均衡</li>
            </ul>
          </div>
          
          <div class="intro-stats">
            <div class="stat-item">
              <div class="stat-number">1.3.3</div>
              <div class="stat-label">当前版本</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">10K+</div>
              <div class="stat-label">并发连接</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">99.9%</div>
              <div class="stat-label">可用性</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">&lt; 10ms</div>
              <div class="stat-label">响应时间</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Team -->
    <section class="team">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">开发团队</h2>
          <p class="section-subtitle">专业的开发团队，致力于提供优质的网络解决方案</p>
        </div>
        
        <div class="team-content">
          <div class="team-member">
            <div class="member-avatar">
              <el-icon><User /></el-icon>
            </div>
            <div class="member-info">
              <h3>吴佳伟 (Jia Wei Wu)</h3>
              <p class="member-title">项目负责人 & 主要开发者</p>
              <p class="member-description">
                拥有多年 Java 开发经验，专注于高性能网络应用开发。
                负责项目的整体架构设计、核心功能开发和性能优化。
              </p>
              <div class="member-skills">
                <span class="skill-tag">Java</span>
                <span class="skill-tag">Spring Boot</span>
                <span class="skill-tag">Netty</span>
                <span class="skill-tag">网络编程</span>
                <span class="skill-tag">系统架构</span>
              </div>
              <div class="member-contact">
                <a href="mailto:1207537021@qq.com" class="contact-link">
                  <el-icon><Message /></el-icon>
                  1207537021@qq.com
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Technology Stack -->
    <section class="technology-stack">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">技术栈</h2>
          <p class="section-subtitle">采用现代化的技术栈，确保高性能和可靠性</p>
        </div>
        
        <div class="tech-categories">
          <div class="tech-category">
            <h3>后端框架</h3>
            <div class="tech-items">
              <div class="tech-item">
                <div class="tech-icon">
                  <el-icon><Monitor /></el-icon>
                </div>
                <div class="tech-info">
                  <h4>Spring Boot 3.5.0</h4>
                  <p>现代化的应用框架，提供快速开发和部署能力</p>
                </div>
              </div>
              
              <div class="tech-item">
                <div class="tech-icon">
                  <el-icon><Connection /></el-icon>
                </div>
                <div class="tech-info">
                  <h4>Netty</h4>
                  <p>高性能异步网络框架，支持高并发连接处理</p>
                </div>
              </div>
              
              <div class="tech-item">
                <div class="tech-icon">
                  <el-icon><Cpu /></el-icon>
                </div>
                <div class="tech-info">
                  <h4>JDK 24</h4>
                  <p>最新的 Java 开发工具包，提供优秀的性能表现</p>
                </div>
              </div>
            </div>
          </div>
          
          <div class="tech-category">
            <h3>数据存储</h3>
            <div class="tech-items">
              <div class="tech-item">
                <div class="tech-icon">
                  <el-icon><DataBase /></el-icon>
                </div>
                <div class="tech-info">
                  <h4>MySQL 8.0</h4>
                  <p>主数据库，存储配置和监控数据</p>
                </div>
              </div>
              
              <div class="tech-item">
                <div class="tech-icon">
                  <el-icon><DataBase /></el-icon>
                </div>
                <div class="tech-info">
                  <h4>H2</h4>
                  <p>开发环境数据库，轻量级嵌入式数据库</p>
                </div>
              </div>
              
              <div class="tech-item">
                <div class="tech-icon">
                  <el-icon><DataBase /></el-icon>
                </div>
                <div class="tech-info">
                  <h4>Lazy ORM</h4>
                  <p>轻量级 ORM 框架，提供类型安全的数据库操作</p>
                </div>
              </div>
            </div>
          </div>
          
          <div class="tech-category">
            <h3>部署运维</h3>
            <div class="tech-items">
              <div class="tech-item">
                <div class="tech-icon">
                  <el-icon><Box /></el-icon>
                </div>
                <div class="tech-info">
                  <h4>Docker</h4>
                  <p>容器化部署，提供一致的运行环境</p>
                </div>
              </div>
              
              <div class="tech-item">
                <div class="tech-icon">
                  <el-icon><Setting /></el-icon>
                </div>
                <div class="tech-info">
                  <h4>Maven</h4>
                  <p>构建自动化工具，管理项目依赖</p>
                </div>
              </div>
              
              <div class="tech-item">
                <div class="tech-icon">
                  <el-icon><Monitor /></el-icon>
                </div>
                <div class="tech-info">
                  <h4>Spring Boot Actuator</h4>
                  <p>应用监控和管理，提供健康检查和指标</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Roadmap -->
    <section class="roadmap">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">发展路线</h2>
          <p class="section-subtitle">项目的未来发展规划和功能演进</p>
        </div>
        
        <div class="roadmap-timeline">
          <div class="timeline-item completed">
            <div class="timeline-marker"></div>
            <div class="timeline-content">
              <h3>v1.3.3 (当前版本)</h3>
              <p class="timeline-date">2025年8月</p>
              <ul>
                <li>升级到 JDK 24 和 Spring Boot 3.5.0</li>
                <li>优化网络性能和稳定性</li>
                <li>增强安全性和认证机制</li>
                <li>完善文档和部署指南</li>
              </ul>
            </div>
          </div>
          
          <div class="timeline-item current">
            <div class="timeline-marker"></div>
            <div class="timeline-content">
              <h3>v1.4.0 (开发中)</h3>
              <p class="timeline-date">2025年Q1</p>
              <ul>
                <li>支持 WebSocket 协议</li>
                <li>增强集群管理功能</li>
                <li>提供 RESTful API</li>
                <li>优化用户界面体验</li>
              </ul>
            </div>
          </div>
          
          <div class="timeline-item planned">
            <div class="timeline-marker"></div>
            <div class="timeline-content">
              <h3>v2.0.0 (规划中)</h3>
              <p class="timeline-date">2025年Q2</p>
              <ul>
                <li>微服务架构重构</li>
                <li>支持 Kubernetes 部署</li>
                <li>提供 SDK 和插件机制</li>
                <li>增强监控和告警功能</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Contact -->
    <section class="contact">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">联系我们</h2>
          <p class="section-subtitle">欢迎反馈建议、报告问题或参与项目贡献</p>
        </div>
        
        <div class="contact-content">
          <div class="contact-methods">
            <div class="contact-method">
              <div class="method-icon">
                <el-icon><Message /></el-icon>
              </div>
              <h3>邮箱联系</h3>
              <p>通过邮件与我们联系，我们会在24小时内回复</p>
              <a href="mailto:1207537021@qq.com" class="contact-link">
                1207537021@qq.com
              </a>
            </div>
            
            <div class="contact-method">
              <div class="method-icon">
                <el-icon><Platform /></el-icon>
              </div>
              <h3>项目地址</h3>
              <p>访问项目仓库，查看源码、提交问题或参与贡献</p>
              <div class="project-links">
                <a href="https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network" target="_blank" class="contact-link">
                  <el-icon><Platform /></el-icon>
                  Gitee
                </a>
                <a href="https://github.com/wujiawei1207537021/wu-lazy-cloud-network" target="_blank" class="contact-link">
                  <el-icon><Platform /></el-icon>
                  GitHub
                </a>
              </div>
            </div>
            
            <div class="contact-method">
              <div class="method-icon">
                <el-icon><Document /></el-icon>
              </div>
              <h3>文档支持</h3>
              <p>查看详细的使用文档、API 文档和开发指南</p>
              <router-link to="/docs" class="contact-link">
                <el-icon><Document /></el-icon>
                查看文档
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- License -->
    <section class="license">
      <div class="container">
        <div class="license-content">
          <h2>开源许可证</h2>
          <p>
            本项目采用 <strong>Apache License 2.0</strong> 开源许可证。
            您可以自由使用、修改和分发本软件，但需要遵守许可证条款。
          </p>
          <div class="license-actions">
            <a href="https://www.apache.org/licenses/LICENSE-2.0" target="_blank" class="btn btn-outline">
              <el-icon><Document /></el-icon>
              查看许可证
            </a>
          </div>
        </div>
      </div>
    </section>

    <Footer />
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { 
  User, 
  Message, 
  Platform, 
  Document,
  Monitor,
  Connection,
  Cpu,
  // DataBase,
  Box,
  Setting
} from '@element-plus/icons-vue'

onMounted(() => {
  // 页面初始化逻辑
})
</script>

<style lang="scss" scoped>
.about-page {
  min-height: 100vh;
}

// Hero Section
.hero {
  padding: 120px 0 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  
  .hero-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 16px;
    
    @media (max-width: 768px) {
      font-size: 32px;
    }
  }
  
  .hero-subtitle {
    font-size: 18px;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
  }
}

// Section Header
.section-header {
  text-align: center;
  margin-bottom: 60px;
  
  .section-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
    
    @media (max-width: 768px) {
      font-size: 28px;
    }
  }
  
  .section-subtitle {
    font-size: 18px;
    color: var(--text-regular);
    max-width: 600px;
    margin: 0 auto;
  }
}

// Project Introduction
.project-intro {
  padding: 80px 0;
  background: var(--background-color);
}

.intro-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 60px;
  align-items: start;
  
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.intro-text {
  h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
  }
  
  p {
    color: var(--text-regular);
    line-height: 1.6;
    margin-bottom: 20px;
  }
  
  ul {
    list-style: none;
    margin-bottom: 20px;
    
    li {
      color: var(--text-regular);
      margin-bottom: 8px;
      position: relative;
      padding-left: 16px;
      
      &::before {
        content: '•';
        position: absolute;
        left: 0;
        color: var(--primary-color);
      }
    }
  }
}

.intro-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  
  .stat-item {
    text-align: center;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: var(--shadow-light);
    
    .stat-number {
      font-size: 24px;
      font-weight: 700;
      color: var(--primary-color);
      margin-bottom: 8px;
    }
    
    .stat-label {
      color: var(--text-regular);
      font-size: 14px;
    }
  }
}

// Team
.team {
  padding: 80px 0;
  background: var(--background-light);
}

.team-content {
  max-width: 800px;
  margin: 0 auto;
}

.team-member {
  display: flex;
  gap: 30px;
  align-items: start;
  
  @media (max-width: 768px) {
    flex-direction: column;
    text-align: center;
  }
  
  .member-avatar {
    width: 100px;
    height: 100px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    
    .el-icon {
      font-size: 40px;
      color: white;
    }
  }
  
  .member-info {
    flex: 1;
    
    h3 {
      font-size: 24px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 8px;
    }
    
    .member-title {
      color: var(--primary-color);
      font-weight: 500;
      margin-bottom: 12px;
    }
    
    .member-description {
      color: var(--text-regular);
      line-height: 1.6;
      margin-bottom: 16px;
    }
    
    .member-skills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 16px;
      
      .skill-tag {
        background: var(--background-light);
        color: var(--text-regular);
        padding: 4px 12px;
        border-radius: 16px;
        font-size: 12px;
        font-weight: 500;
      }
    }
    
    .member-contact {
      .contact-link {
        color: var(--primary-color);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

// Technology Stack
.technology-stack {
  padding: 80px 0;
  background: var(--background-color);
}

.tech-categories {
  max-width: 1200px;
  margin: 0 auto;
}

.tech-category {
  margin-bottom: 60px;
  
  h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 30px;
    text-align: center;
  }
}

.tech-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
}

.tech-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: var(--shadow-light);
  
  .tech-icon {
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    
    .el-icon {
      font-size: 24px;
      color: white;
    }
  }
  
  .tech-info {
    h4 {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 4px;
    }
    
    p {
      font-size: 14px;
      color: var(--text-regular);
      line-height: 1.4;
    }
  }
}

// Roadmap
.roadmap {
  padding: 80px 0;
  background: var(--background-light);
}

.roadmap-timeline {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-light);
  }
}

.timeline-item {
  position: relative;
  margin-bottom: 40px;
  padding-left: 60px;
  
  .timeline-marker {
    position: absolute;
    left: 11px;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid white;
  }
  
  &.completed .timeline-marker {
    background: var(--success-color);
  }
  
  &.current .timeline-marker {
    background: var(--primary-color);
  }
  
  &.planned .timeline-marker {
    background: var(--warning-color);
  }
  
  .timeline-content {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: var(--shadow-light);
    
    h3 {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 8px;
    }
    
    .timeline-date {
      color: var(--text-regular);
      font-size: 14px;
      margin-bottom: 12px;
    }
    
    ul {
      list-style: none;
      
      li {
        color: var(--text-regular);
        margin-bottom: 6px;
        position: relative;
        padding-left: 16px;
        
        &::before {
          content: '•';
          position: absolute;
          left: 0;
          color: var(--primary-color);
        }
      }
    }
  }
}

// Contact
.contact {
  padding: 80px 0;
  background: var(--background-color);
}

.contact-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.contact-method {
  text-align: center;
  padding: 30px;
  background: white;
  border-radius: 12px;
  box-shadow: var(--shadow-light);
  
  .method-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    
    .el-icon {
      font-size: 28px;
      color: white;
    }
  }
  
  h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
  }
  
  p {
    color: var(--text-regular);
    line-height: 1.6;
    margin-bottom: 16px;
  }
  
  .contact-link {
    color: var(--primary-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    
    &:hover {
      text-decoration: underline;
    }
  }
  
  .project-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }
}

// License
.license {
  padding: 60px 0;
  background: var(--background-light);
  text-align: center;
  
  .license-content {
    max-width: 600px;
    margin: 0 auto;
    
    h2 {
      font-size: 24px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 16px;
    }
    
    p {
      color: var(--text-regular);
      line-height: 1.6;
      margin-bottom: 20px;
    }
    
    .license-actions {
      display: flex;
      justify-content: center;
    }
  }
}
</style> 